<template>
  <div class="user-info clearfix">
   <div class="in-left">
     <a-tooltip>
        <p class="user-name oneline-hide">经销商ID: {{ users.user_id }}</p>
		<!-- <template slot="title">姓名: {{ users.nick_name }}</template> -->
		<p class="user-name oneline-hide">姓名: {{ user.nick_name }}</p>
		<p class="user-name oneline-hide">电话: {{ users.mobile }}</p>
       <!-- <img v-if="user.user.avatar_url.length" :src="user.user.avatar_url" alt="经销商头像" />
        <img v-else src="~@/assets/img/default-avatar.png" alt="经销商头像" /> -->
      </a-tooltip>
    </div>
    <!-- <div class="in-right flex flex-dir-column flex-x-center"> -->
      <!-- <p class="user-name oneline-hide">{{ user.real_name ? user.real_name : user.nick_name }}</p> -->
     <!-- <p class="user-platform">
        <platform-icon :name="user.platform" :showTips="true" />
      </p> -->
    <!-- </div> -->
  </div>
</template>

<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { isEmpty } from '@/utils/util'
// import PlatformIcon from '@/components/PlatformIcon'

// Table内容元素: 经销商信息
export default {
  name: 'UserItem',
  // components: {
  //   PlatformIcon
  // },
  props: {
    // 经销商信息
    user: PropTypes.object.def({})
  },
  computed: {
    users () {
      return Object.assign({
        user_id: '',
        nick_name: '',
        mobile: '',
      }, this.$props.user)
    }
  },
  data () {
    return {
      isEmpty
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
// 经销商信息
.user-info {
  width: 160px;
  height: 40px;
  line-height: 1.3;

  .in-left {
    float: left;
    margin-right: 10px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .in-right {
    float: left;
    width: 100px;
    height: 100%;

    .user-name {
      margin-bottom: 2px;
    }
  }
}
</style>
